<template>
  <div class="header-div flex rest">
    <p class="flex" @click="goToBack">
      <van-icon name="arrow-left" class="active" />
      <span class="active head-text">{{ i18n.$t('back') }}</span>
    </p>
    <p>{{ i18n.$t(headerTitle) }}</p>
  </div>
</template>

<script lang="ts">
  import { useI18n } from '@/i18nPlugin'
  import { ref, defineComponent } from 'vue'
  import { useRouter } from 'vue-router'

  export default defineComponent({
    nem: 'MheaderTitle',
    props: {
      headerTitle: {
        type: String,
        default: ''
      }
    },
    setup: (props, context) => {
      const router = useRouter()
      const i18n = useI18n()
      const showPopover = ref(false)
      const headerTitle = ref(props.headerTitle)
      const actions = [{ text: '中文' }, { text: 'English' }]
      let popSelect = (item: any) => {
        const locale = item.text === '中文' ? 'en' : 'es'
        i18n.locale.value = locale
      }
      let goToBack = () => {
        context.emit('goBack')
      }
      return {
        actions,
        i18n,
        popSelect,
        showPopover,
        headerTitle,
        goToBack
      }
    }
  })
</script>

<style scoped lang="scss">
  .header-div {
    width: 100%;
    padding: 0 5%;
    height: 60px;
    position: fixed;
    z-index: 1000;
    top: 0;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    p {
      width: 33.333%;
    }
    p:nth-child(1) {
      font-size: 26px;
      i {
        font-size: 28px;
      }
    }
    p:nth-child(2) {
      font-size: 24px;
      color: #333;
      text-align: center;
    }
  }
  .van-popover__content {
    width: 100%;
  }
  .flex-row :deep(.van-icon) {
    font-size: 50px;
  }
  .active {
    color: $theme-active !important;
  }
</style>
